<template>
  <div>
    <main-nav index="2"></main-nav>
    <div class="container margin-top-15">
      <i-card dis-hover :bordered="false">
        <p slot="title">知识点</p>
        <i-form @submit.native.prevent="search()">
          <filters @changed="filterChanged" :gradesVisible="false" :editionsVisible="false" :hideDefault="true" ref="filters"></filters>
        </i-form>
      </i-card>
      <div class="main-container">
        <figure>
          <chart
            :options="graphOptions"
            :init-options="initOptions"
            group="graph"
            ref="graph"
            @click="tagClicked"
            auto-resize
          />
        </figure>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/graph'

import { mapActions } from 'vuex'
import MainNav from '../components/main-nav'
import Filters from '../components/filters'
export default {
  data() {
    return {
      subject: 1,
      grade: 1,
      tags: [],
      initOptions: {
        renderer: 'canvas'
      },
      graphOptions: {
        title: {
          text: '知识点关系图谱',
          subtext: 'Default layout',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {},
        legend: [
          {
            data: []
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: []
      }
    }
  },
  components: {
    MainNav,
    Filters,
    Chart: ECharts
  },
  methods: {
    ...mapActions({
      getTagRelations: 'getTagRelations'
    }),
    filterChanged(query) {
      this.subject = query.subject
      this.grade = query.grade
    },
    getGraphOptions(data) {
      var legendData = data.grades.map(t => {
        return t.name
      })
      this.tags = data.tags
      return {
        width: 800,
        tooltip: {},
        legend: [
          {
            data: legendData
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '知识点',
            type: 'graph',
            layout: 'force',
            data: data.tags,
            links: data.relations,
            categories: data.grades,
            roam: true,
            focusNodeAdjacency: true,
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 1,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            },
            label: {
              position: 'right',
              formatter: '{b}',
              show: true
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      }
    },
    search() {
      let graph = this.$refs.graph
      let that = this
      graph.showLoading({
        text: '正在加载'
        // color: "#4ea397",
        // maskColor: "rgba(255, 255, 255, 0.4)"
      })
      this.getTagRelations({
        query: {
          subject: this.subject,
          grade: this.grade
        },
        callback(data) {
          graph.hideLoading()
          const options = that.getGraphOptions(data)
          graph.mergeOptions(options)
        }
      })
    },
    tagClicked(e) {
      var index = e.dataIndex
      const tag = this.tags[index]
      this.$router.push({
        name: 'search',
        params: { type: 'Course' },
        query: { keyword: tag.name, tagId: tag.id }
      })
    }
  },
  watch: {
    subject() {
      this.search()
    },
    grade() {
      this.search()
    }
  },
  mounted() {
    this.$refs.filters.subject = this.subject
    this.$refs.filters.grade = this.grade
  },
  activated() {
    this.search()
  }
}
</script>

<style lang="less">
figure {
  display: inline-block;
  margin: 2em auto;
  background: white;
  margin-top: 2em !important;
  border-radius: 8px;
  padding: 1.5em 2em !important;
  width: 100%;

  .echarts {
    // width 40vw
    width: 100% !important;
    min-height: 400px;
  }
}
</style>
